<template>
	<view class="mainbgc" @click="hidefalse">
		<header-top :messageInfo="{typeFlag:true,message:'预收款单',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<!-- <view class="nostrongtext margin_right"@click.stop="submit">提交</view> -->
					<view class="diandiandian" @click.stop="dian">
						<view class="selectcontent " v-show="selectshow">
							<view class="topbox">
								<view class="flexleft itemselect" @click.stop="qingkong">
									<view class="leftimage margin_right">
										<image src="../../../static/image/system/shanchu.png" mode=""></image>
									</view>
									<view>清空单据</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding ffffff">
			<view class="inputbox">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">客户</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="selectRole('/pages/workbench/jiben/kehuda?type=1',1)">
					<input type="text" placeholder="点击选择客户" disabled="true" v-model="dataAll.custom_name">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="ffffff margin-top flexbetween ywy">
				<view class="strongtext">支付方式</view>
				<view class="flexright">
					<u-radio-group v-model="dataAll.pay_type" placement="column" circle>
						<!-- <u-radio activeColor="#00B855" :customStyle="{marginBottom: '30rpx'}" label="余额支付" name="40"></u-radio> -->
						<u-radio activeColor="#00B855" :customStyle="{marginBottom: '30rpx'}" label="微信支付" name="10"></u-radio>
						<u-radio activeColor="#00B855" :customStyle="{marginBottom: '30rpx'}" label="支付宝支付" name="20"></u-radio>
						<u-radio activeColor="#00B855" :customStyle="{marginBottom: '30rpx'}" label="银行卡支付" name="30"></u-radio>
						<u-radio activeColor="#00B855" label="现金支付" name="40"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<!-- <view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">支付方式</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<u-radio-group
					    v-model="dataAll.pay_type"
					    placement="row" circle>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '10rpx'}" label="微信" name="10"></u-radio>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '10rpx'}" label="支付宝" name="20"></u-radio>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '10rpx'}" label="银行卡" name="30"></u-radio>
						<u-radio activeColor="#0BBDCB" label="现金" name="40"></u-radio>
					</u-radio-group>
				</view>
			</view> -->
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">预收款金额</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="number" placeholder="请输入金额" v-model="dataAll.pay_price">
				</view>
			</view>
			<view class="margin_top flexright xiaohong" v-if="dataAll.custom_id">实际预收款金额 = 预收款金额 - 欠款</view>
			<view class="inputbox margin_top" v-if="dataAll.custom_id">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">欠款</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="number" placeholder="请输入金额" v-model="dataAll.custom_data.qk_price" disabled>
				</view>
			</view>
			<view class="inputbox margin_top" v-if="dataAll.custom_id">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">实际预收款</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="number" placeholder="请输入金额" v-model="sj_price" disabled>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">备注</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入备注内容" v-model="dataAll.notes">
				</view>
			</view>
			<!-- <view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">来源</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<u-radio-group
					    v-model="dataAll.platform"
					    placement="row" circle>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="app" name="10"></u-radio>
						<u-radio activeColor="#0BBDCB" label="小程序" name="20"></u-radio>
					</u-radio-group>
				</view>
			</view> -->
			<!-- <view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">送优惠券</view>
				</view>
				<view class="itembox flexbetween" @click="selectRole('/pages/workbench/caiwu/youhuiquanls?type=1')">
					<input type="text" placeholder="点击添加优惠券" disabled="true">
					<view class="righticon2"></view>
				</view>
			</view> -->
			<view class="margin_top flexright xiaohong" @click="jumpurl('/pages/systempage/systempage?type=5')">预收款活动说明</view>
			<view class="flexbetween margin_top2" v-for="(item,index) in dataAll.coupon_data" :key="index">
				<view class="xiaohui">{{item.name}}</view>
				<view class="flexright">
					<view class="xiaolv margin_right">{{item.num}}张</view>
					<u-icon name="trash" color="#ff0000" size="18" @click="delyhq(index)"></u-icon>
				</view>
			</view>
			
		</view>
		<view class="mainpadding">
			<view class="surebtns" @click="submit">提交</view>
		</view>
		<moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalSure="modalSure"></moDal><!-- 模态框 -->
		<template v-if="shareshow">
			<u-popup :show="shareshow" mode="center" :closeOnClickOverlay="false" closeable @close="guanbi"
				round="10">
				<view class="mainpadding_top">
					<view class="titletext margin_top">订单编号：{{pay_data.order_no}}</view>
					<view class="flexcenter" style="margin-top: 30rpx;">
						<uqrcode ref="uqrcode" canvas-id="qrcode" v-bind:value="pay_data.expend.qrcode_url"
							:options="{ margin: 10, }">
						</uqrcode>
					</view>
					<view class="margin_top">姓名：{{dataAll.custom_name}}</view>
					<view class="flexbetween margin_top">
						<view class="savebtn" @click="saveimg">保存图片</view>
						<view class="savebtn" style="background-color: #00B855;" @click="shareimg">分享好友</view>
					</view>
				</view>
			</u-popup>
		</template>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				selectshow:false,
				dataAll:{
					custom_id:"",//客户id
					custom_name:"",//客户名称
					custom_data:{},//客户数据
					pay_type:"10",
					pay_price:"",//预收款金额
					notes:"",//备注
					platform:"10",//来源：10=app,20=微信小程序
					custom_visit_id:"",
					coupon_data:[],//优惠券数据
				},
				bfFlag:false,
				modal:{
					modalShow:false,
					title:""
				},
				wfxzflag:true,
				sj_price:0,
				
				
				setIntervalPay:null,
				pay_data: {},
				shareshow: false,
			}
		},
		
		onLoad(options) {
			if(options.data){//拜访数据进入
				let data = JSON.parse(decodeURIComponent(options.data));
				this.dataAll.custom_id = data.id
				this.dataAll.custom_name = data.name
				this.dataAll.custom_data = data.data
				this.dataAll.custom_visit_id = data.custom_visit_id
				this.bfFlag = true
				this.refreshmsg()
			}
		},
		onShow() {
			uni.$off('khSelectFn');
			uni.$on('khSelectFn', (data) => {
				this.wfxzflag = false
				this.dataAll.custom_id = data.id
				this.dataAll.custom_name = data.name
				this.dataAll.custom_data = data.data
				return false
			})
			uni.$off('yhqSelectFn');
			uni.$on('yhqSelectFn', (data) => {
				this.wfxzflag = false
				this.dataAll.coupon_data.push(data)
				return false
			})
			if (this.wfxzflag && uni.getStorageSync("yushoukuanInfo")) {
				this.dataAll = JSON.parse(uni.getStorageSync("yushoukuanInfo"))
			}else{
				this.wfxzflag = true
			}
		},
		onUnload() {
			clearInterval(this.setIntervalPay)
		},
		watch: {
			dataAll: {
				deep: true,
				handler(newval) {
					this.refreshmsg()
					if(this.dataAll.custom_id){
						let allprice = Number(this.dataAll.pay_price) - Number(this.dataAll.custom_data.qk_price)
						this.sj_price =  allprice<0?0:allprice
					}
				}
			}
		},
		methods: {
			shareimg(){
				this.$refs.uqrcode.toTempFilePath({
				  success: res => {
					  this.uploadImageServicefx(res.tempFilePath)
				  }
				});
			},
			uploadImageServicefx(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					this.zfshare(_this.pay_data.order_no,res.fullurl)
				}).catch(err => {});
			},
			jumpurl(url){
				uni.navigateTo({
					url
				})
			},
			selectRole(url,val) {
				if(val==1 && this.bfFlag){
					httpRequest.toast("当前数据为拜访数据，不可选择客户！")
					return false
				}
				uni.navigateTo({
					url
				})
			},
			// 数据刷新
			refreshmsg() {
				let _this = this
				uni.setStorageSync('yushoukuanInfo', JSON.stringify(this.dataAll))
			},
			qingkong() {
				this.selectshow = false
				this.modal.modalShow = true
				this.modal.title = "确认清空单据？"
			},
			modalSure() {
				this.modal.modalShow = false
				if (this.modal.title == "确认清空单据？") {
					uni.setStorageSync('yushoukuanInfo', "")
					httpRequest.toast("清除成功")
					setTimeout(function() {
						uni.navigateBack(1)
					}, 500)
				}
			},
			// 删除优惠券
			delyhq(index){
				this.dataAll.coupon_data.splice(index,1)
			},
			// 提交
			submit() {
				if (this.dataAll.custom_name == '') {
					httpRequest.toast('请选择客户!')
					return false
				}
				if (this.dataAll.pay_price=="") {
					httpRequest.toast('请输入预收款金额!')
					return false
				}
				if (this.dataAll.pay_type == 10) {//微信支付
					this.scanbarCode()
					return false
				}
				let data = JSON.parse(JSON.stringify(this.dataAll.coupon_data))
				data.forEach(item => {
					delete item.name
				})
				httpRequest.request('/dhtapi/Customyskorder/addCustomYskOrder', 'POST', {
					custom_id:this.dataAll.custom_id,
					pay_type:this.dataAll.pay_type,
					pay_price:this.dataAll.pay_price,
					notes:this.dataAll.notes,
					platform:this.dataAll.platform,
					custom_visit_id: this.bfFlag?this.dataAll.custom_visit_id:"",
					coupon_data:this.dataAll.coupon_data
				}, false, false, true).then(res => {
					console.log(res,666);
					if (res.code == 1) {
						if(this.dataAll.pay_type==20){//支付宝支付、
							this.pay_data = res.data
							this.shareshow = true
							this.setIntervalPay = setInterval(() => {
								this.getpaytype(res.data.query_url) //获取支付宝的支付状态，是否支付完成
							}, 1000)
						}else if(this.dataAll.pay_type==40 || this.dataAll.pay_type==30){//现金支付成功
							uni.setStorageSync('yushoukuanInfo', "")
							httpRequest.toast(res.msg)
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						}
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			scanbarCode() {
				let that = this
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						that.chuangjiandd(res.result)
					},
					fail(err) {
						console.log('错误信息：' + err);
					}
				});
			},
			chuangjiandd(val) {
				httpRequest.request('/dhtapi/Customyskorder/addCustomYskOrder', 'POST', {
					custom_id:this.dataAll.custom_id,
					pay_type:this.dataAll.pay_type,
					pay_price:this.dataAll.pay_price,
					notes:this.dataAll.notes,
					platform:this.dataAll.platform,
					custom_visit_id: this.bfFlag?this.dataAll.custom_visit_id:"",
					coupon_data:this.dataAll.coupon_data,
					auth_code: val
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.setIntervalPay = setInterval(() => {
							this.getpaytype(res.data.query_url) //获取微信用户的支付状态，是否支付完成
						}, 1000)
					}
				})
			},
			getpaytype(url) {
				uni.request({
					url: url,
					data: {},
					method: "GET", //'GET','POST'
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "获取支付信息获取支付信息");
						if(res.data.status=="succeeded"){//支付成功
							httpRequest.toast("客户支付成功")
							uni.setStorageSync('yushoukuanInfo', "")
							clearInterval(this.setIntervalPay)
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						}
					},
					fail: (res) => {
					}
				})
			},
			guanbi(){
				clearInterval(this.setIntervalPay)
				// this.shareshow = false
				uni.navigateBack(1)
			},
			saveimg() {
				this.$refs.uqrcode.save({
					success: () => {
						uni.showToast({
							title: '保存成功'
						});
					}
				});
			},
			hidefalse() {
				if (this.selectshow == true) {
					this.selectshow = false
					return
				}
			},
			dian() {
				this.selectshow = this.selectshow == false ? true : false
			},
		}
	}
</script>
<style lang="scss" scoped>
	
	.surebtn {
		width: 45%;
		border: #27b366 1rpx solid;
	}
	
	.reset {
		background: #fff;
		color: #27b366;
		border: #27b366 1rpx solid;
	}
	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	//
	.flex1 {
		flex: 3;
	}

	.inputbox {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.itembox {
		flex: 7;
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}

	.lanseyoujt {
		background-image: url('@/static/image/system/lanseyoutubiao.png');
		width: 12rpx;
		height: 22rpx;
		margin: 0 30rpx 0 10rpx;
		background-size: 100% 100%;
	}

	.lansetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.shangbianju {
		margin-top: 10rpx;
	}
</style>
<style lang="scss" scoped>
	// 定位点点点
	.diandiandian {
		position: relative;
	}

	.topbox {
		border-bottom: 2rpx solid rgba(255, 255, 255, .1);
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 200rpx;
		mix-width: 200rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.itemselect {
		padding: 20rpx 30rpx;
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 250rpx;
		mix-width: 250rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.leftimage {
		width: 34rpx;
		height: 34rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.itemselect {
		padding: 20rpx 30rpx;
	}
</style>